<template>
  <div class="app-container">
    <!-- 搜索 -->

    <el-card class="search-card" v-if="tongjiStatus">
      <el-row :gutter="10" class="mb8" style="font-size: 14px">
        <!-- <el-col :span="3">校区:{{ detail.campusName }}</el-col> -->
        <el-col :span="3">年级:{{ detail.gradeName }}</el-col>
        <el-col :span="3">班级:{{ detail.className }}</el-col>
        <el-col :span="3">班级总人数:{{ detail.total }}人</el-col>
        <el-col :span="3">团餐人数:{{ detail.teamTotal }}人</el-col>
        <el-col :span="3">普通餐人数:{{ detail.pt_list_num }}人</el-col>
        <el-col :span="3">清真餐人数:{{ detail.qz_list_num }}人</el-col>
        <el-col :span="3">未团餐人数:{{ detail.teamNoTotal }}人</el-col>
      </el-row>
    </el-card>
    <el-card class="table-card">
      <!-- <el-button icon="el-icon-add" size="mini" @click="buttonMethods(1)">
        添加学生
      </el-button> -->
      <el-form
        :model="dialogParams"
        ref="dialogParams"
        size="small"
        v-show="showSearch"
        label-width="88px"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="年级名称" prop="gradeId">
              <el-select
                v-model="dialogParams.gradeId"
                placeholder="请选择年级名称"
                style="width: 100%"
                @change="gradeFun"
              >
                <el-option
                  v-for="(item, index) in gradeList"
                  :key="index"
                  :value="item.id"
                  :label="item.gradeName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="班级" prop="classId">
              <el-select
                v-model="dialogParams.classId"
                placeholder="请选择班级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in classList"
                  :key="index"
                  :value="item.id"
                  :label="item.className"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <div class="dis aic">
                <div class="flex_1"></div>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="getList"
                >
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(2)">
                  重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="68px">
        <div class="" v-if="tongjiStatus">
          <div class="title">普通餐人数：{{ detail.pt_list_num }}人</div>
          <el-row style="margin-top: 6px" :gutter="10">
            <el-col
              :span="2"
              v-for="(item, index) in pt_list"
              :key="index"
              class="titles"
            >
              <el-tag
                closable
                class="rightCheckboxs"
                @close="handleClose(item, index, 1, true)"
              >
                {{ item.name }}
              </el-tag>
            </el-col>
          </el-row>
          <div class="title">清真餐人数：{{ detail.qz_list_num }}人</div>
          <el-row style="margin-top: 6px" :gutter="10">
            <el-col
              :span="2"
              v-for="(item, index) in qz_list"
              :key="index"
              class="titles"
            >
              <el-tag
                closable
                class="rightCheckboxs"
                @close="handleClose(item, index, 2, true)"
              >
                {{ item.name }}
              </el-tag>
            </el-col>
          </el-row>
        </div>
        <el-row style="margin-top: 10px">
          <el-col :span="12">
            <el-form-item label="用餐类型" prop="gradeId" style="width: 100%">
              <el-select
                v-model="queryForm.diningType"
                placeholder="请选择用餐类型"
                style="width: 100%"
                multiple
              >
                <el-option
                  v-for="(item, index) in queryListSchoolMealTypeData"
                  :key="index"
                  :value="item.id"
                  v-if="item.isUse == 1 && item.useStatus == 1"
                  :label="item.mealType"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用餐时间" prop="classId" style="width: 100%">
              <el-date-picker
                v-model="queryForm.teamTime"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="color: red">
            【提示】提交团餐后会实时扣款家长账号
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="tac">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="buttonMethods(3)">取 消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 穿梭框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <div class="dis">
        <div class="leftBox">
          <div class="leftTopBox dis aic">
            <div class="flex_1">选择学生</div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >
              全选
            </el-checkbox>
          </div>
          <div class="leftBottomBox">
            <el-checkbox-group v-model="studentId" @change="handleCheckChange">
              <div v-for="(item, index) in studentList" :key="index" class="leftCheckbox">
                <el-checkbox :label="item" border size="medium">
                  {{ item.name }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div class="flex_1">
          <div class="width_100 dis aic">
            <div class="icon" @click="rightTopClick">
              <i class="el-icon-d-arrow-right"></i>
            </div>
            <div class="rightBox">
              <div class="title">普通餐</div>
              <div class="rightSmallBox">
                <el-tag
                  v-for="(item, index) in pt_list"
                  :key="index"
                  closable
                  class="rightCheckbox"
                  @close="handleClose(item, index, 1)"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="width_100 dis aic">
            <div class="icon" @click="rightBottomClick">
              <i class="el-icon-d-arrow-right"></i>
            </div>
            <div class="rightBox">
              <div class="title">清真餐</div>
              <div class="rightSmallBox">
                <el-tag
                  v-for="(item, index) in qz_list"
                  :key="index"
                  closable
                  class="rightCheckbox"
                  @close="handleClose(item, index, 2)"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer tac">
        <el-button type="primary" @click="buttonMethods(2)">确 定</el-button>
        <el-button @click="buttonMethods(3)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 确定框 -->
    <el-dialog :title="title" :visible.sync="openStatus" width="60%" append-to-body>
      <el-row :gutter="10" class="mb8" style="font-size: 14px">
        <!-- <el-col :span="3">校区:{{ detail.campusName }}</el-col> -->
        <el-col :span="3">年级:{{ detail.gradeName }}</el-col>
        <el-col :span="3">班级:{{ detail.className }}</el-col>
        <el-col :span="3">班级总人数:{{ detail.total }}人</el-col>
        <el-col :span="3">团餐人数:{{ detail.teamTotal }}人</el-col>
        <el-col :span="3">未团餐人数:{{ detail.teamNoTotal }}人</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">未团餐学生</el-col>
      </el-row>
      <el-row class="width_100" :gutter="10">
        <el-col :span="2" v-for="(item, index) in studentList" :key="index">
          {{ item.name }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="tac">
            <el-button type="primary" @click="buttonMethods(4)">确 定</el-button>
            <el-button @click="buttonMethods(3)">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { listGrade } from "@/api/campus/grade";
import { listClassManage } from "@/api/campus/classManage";
import { getCampusLists } from "@/api/campus/all";
import { personListNoSign, insertTeamDining } from "@/api/teamMeal/deduction";

import { queryListSchoolMealType } from "@/api/teamMeal/mealStandard";
export default {
  name: "deduction",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openStatus: false,
      tongjiStatus: false,
      // 查询参数
      queryParams: {
        campusId: null,
        gradeId: null,
        classId: null,
        name: null,
        idCardNumber: null,
      },
      dialogParams: {
        campusId: null,
        gradeId: null,
        classId: null,
      },
      dataList: [], //校区列表
      campusList: [], //校区列表
      gradeList: [], //年级列表
      classList: [], //班级列表
      studentList: [],
      pt_list: [],
      qz_list: [],
      studentId: [],
      isIndeterminate: true,
      checkAll: false,
      detail: {},
      queryForm: {},
      queryListSchoolMealTypeData: [],
    };
  },
  watch: {
    "dialogParams.campusId": function (newVal) {
      if (newVal) {
        const selectedOption = this.campusList.find((option) => option.id === newVal);
        this.gradeList = [];
        this.detail.campusName = selectedOption.campusName;
      }
    },
    "dialogParams.gradeId": function (newVal) {
      if (newVal) {
        const selectedOption = this.gradeList.find((option) => option.id === newVal);
        this.classList = [];
        this.detail.gradeName = selectedOption.gradeName;
      }
    },
    "dialogParams.classId": function (newVal) {
      if (newVal) {
        const selectedOption = this.classList.find((option) => option.id === newVal);
        this.detail.className = selectedOption.className;
      }
    },
  },
  created() {
    // this.getCampusListsFun();
    this.listGradeFun();
  },
  activated() {
    // this.getCampusListsFun();
    this.listGradeFun();
    this.$forceUpdate();
  },
  methods: {
    /** 查询人员管理列表 */
    getList() {
      this.loading = true;
      var data = this.dialogParams;
      // if (!data.campusId) {
      //   return this.$message.error("请选择校区");
      // }
      if (!data.gradeId) {
        return this.$message.error("请选择年级");
      }
      if (!data.classId) {
        return this.$message.error("请选择班级");
      }
      personListNoSign(data).then((response) => {
        this.studentList = response.data;
        this.detail.total = response.data.length;
        this.pt_list = [];
        this.qz_list = [];

        this.title = "添加学生";
        this.open = true;
        this.isIndeterminate = false;
        this.checkAll = false;
        this.studentId = [];
        this.detail.pt_list_num = this.pt_list.length;
        this.detail.qz_list_num = this.qz_list.length;
        this.detail.teamTotal = this.detail.pt_list_num + this.detail.qz_list_num;
        this.detail.teamNoTotal = this.detail.total - this.detail.teamTotal;
        this.$forceUpdate();
      });
    },
    /**
     * 获取校园列表
     * 调用后端接口获取校园列表，并将结果赋值给当前组件的campusList属性。
     */
    getCampusListsFun() {
      getCampusLists({ schoolId: null }).then((res) => {
        if (res.code == 200) {
          this.campusList = res.data;
        }
      });
    },
    /**
     * 获取成绩列表
     * @param options 包含校区ID的对象
     */
    listGradeFun(options) {
      console.log(this);
      this.gradeList = [];
      listGrade({ pageNum: 1, pageSize: 200, campusId: options }).then((res) => {
        if (res.code == 200) {
          this.gradeList = res.rows;
        }
      });
    },
    /**
     * 获取班级列表
     * @param options - 年级ID
     */
    gradeFun(options) {
      this.dialogParams.classId = null;
      listClassManage({ pageNum: 1, pageSize: 200, gradeId: options }).then(
        (response) => {
          this.classList = response.rows;
        }
      );
    },
    /**
     * 按钮方法处理函数
     * @param options 按钮操作类型
     * @param value 附加参数（当前未使用）
     * @returns 无返回值
     */
    buttonMethods(options, value) {
      if (options == 1) {
        this.title = "添加学生";
        this.open = true;
        this.isIndeterminate = false;
        this.pt_list = [];
        this.qz_list = [];
        this.checkAll = false;
      }
      // 提交
      else if (options == 2) {
        this.detail.pt_list_num = this.pt_list.length;
        this.detail.qz_list_num = this.qz_list.length;
        this.detail.teamTotal = this.detail.pt_list_num + this.detail.qz_list_num;
        this.detail.teamNoTotal = this.detail.total - this.detail.teamTotal;
        if (this.detail.teamTotal > 0) {
          this.open = false;
          this.title = "确认团餐";
          this.openStatus = true;
        } else {
          this.$message.error("请选择用餐学生");
        }
      }
      // 取消
      else if (options == 3) {
        this.title = "";
        this.open = false;
        this.detail = {};
        this.pt_list = [];
        this.qz_list = [];
        this.tongjiStatus = false;
        this.studentList = [];
        this.queryForm = {};
        this.openStatus = false;
        this.resetForm("dialogParams");
        this.resetForm("queryForm");
        this.checkAll = false;
      }
      // 确认框确定
      else if (options == 4) {
        this.title = "";
        this.openStatus = false;
        this.tongjiStatus = true;
        this.queryListSchoolMealTypeFun(this.dialogParams.campusId);
      }
    },
    /**
     * 提交表单
     *
     * @returns 无返回值
     */
    submitForm() {
      var data = this.queryForm;
      // {diningType:4,diningTypeNmae;‘馒头’}
      var arr = [];
      this.qz_list.forEach((item) => {
        item.diningStyle = "2";
        item.campusId = this.dialogParams.campusId;
        item.campusName = this.detail.campusName;
        arr.push(item);
      });
      this.pt_list.forEach((item) => {
        item.diningStyle = "1";
        item.campusId = this.dialogParams.campusId;
        item.campusName = this.detail.campusName;
        arr.push(item);
      });
      data.teamDiningList = arr;

      if (data.teamDiningList.length == 0) {
        return this.$message.error("请选择用餐学生");
      }

      var arrObj = [];
      data.diningType.forEach((item1) => {
        this.queryListSchoolMealTypeData.forEach((item2) => {
          if (item1 == item2.id) {
            arrObj.push({
              diningType: item2.id,
              diningTypeName: item2.mealType,
              mealType: item2.meals,
            });
          }
        });
      });
      data.teamType = arrObj;
      /**
       * 用餐类型1普通2清真
       */
      if (data.teamType.length == 0) {
        return this.$message.error("请选择用餐类型");
      }
      if (!data.teamTime) {
        return this.$message.error("请选择用餐时间");
      }
      insertTeamDining(data).then((res) => {
        if (res.code == 200) {
          this.buttonMethods(3);
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**
     * 处理全选变化
     * @param options 当前选项数组
     */
    handleCheckAllChange(options) {
      if (options == true) {
        this.studentId = [...this.studentList];
      } else {
        this.studentId = [];
      }
      this.isIndeterminate = false;
      if (this.studentId.length == this.studentList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
    handleCheckChange(options) {
      if (this.studentId.length == this.studentList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
    /**
     * 点击右上角按钮触发的方法
     * @returns 无返回值
     */
    rightTopClick() {
      this.studentId.forEach((item1, index1) => {
        this.studentList.forEach((item2, index2) => {
          if (item1.id == item2.id) {
            this.studentList.splice(index2, 1);
          }
        });
      });
      this.pt_list = [...this.pt_list, ...this.studentId];
      this.studentId = [];
    },
    /**
     * 当点击右下角按钮时触发的函数
     */
    rightBottomClick() {
      this.studentId.forEach((item1, index1) => {
        this.studentList.forEach((item2, index2) => {
          if (item1.id == item2.id) {
            this.studentList.splice(index2, 1);
          }
        });
      });
      this.qz_list = [...this.qz_list, ...this.studentId];
      this.studentId = [];
    },
    /**
     * 处理关闭事件的方法
     */
    handleClose(options, index, tab, status) {
      if (tab == 1) {
        this.pt_list.splice(index, 1);
      } else if (tab == 2) {
        this.qz_list.splice(index, 1);
      }
      this.studentList.push(options);

      if (status) {
        this.detail.pt_list_num = this.pt_list.length;
        this.detail.qz_list_num = this.qz_list.length;
        this.detail.teamTotal = this.detail.pt_list_num + this.detail.qz_list_num;
        this.detail.teamNoTotal = this.detail.total - this.detail.teamTotal;
      }
    },
    /** 重置按钮操作 */
    resetQuery(options) {
      if (options == 1) {
        this.resetForm("queryParams");
        this.tongjiStatus = false;
      } else if (options == 2) {
        this.resetForm("dialogParams");
        this.classList = [];
      }
    },
    /**
     * 查询学校餐类型列表的函数
     * @param options 查询参数
     */
    queryListSchoolMealTypeFun(options) {
      queryListSchoolMealType({}).then((res) => {
        this.queryListSchoolMealTypeData = res.data;
      });
    },
    /**
     * 处理导出操作
     */
    handleExport() {
      this.download(
        "/dining/exportTeamDining",
        {
          ...this.queryParams,
        },
        "笔笔扣" + `_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
.formBox >>> .el-form-item--small.el-form-item {
  margin-bottom: 0px !important;
}

.formBox >>> .el-form-item__label {
  font-size: 12px !important;
  padding: 0 !important;
}
.padding_4_10 {
  padding: 4px 10px !important;
}
.leftBox {
  width: 300px;
  height: 380px;
  border: 1px solid #f5f7fa;
  border-radius: 20px;
}
.leftTopBox {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 10px 0;
}
.leftBottomBox {
  width: 90%;
  height: 300px;
  margin: 0 auto;
  overflow-y: auto;
}

.leftCheckbox {
  width: 50%;
  display: inline-block;
  margin-top: 6px;
}
.rightBox {
  width: 100%;
  height: 185px;
  border: 1px solid #e9e9e9;
  border-radius: 20px;
  margin-bottom: 10px;
}
.rightSmallBox {
  width: 96%;
  margin: 0 auto;
  height: 165px;
  overflow-y: auto;
  padding: 10px 0;
}
.rightCheckbox {
  display: inline-block;
  margin-top: 4px;
  margin-left: 10px;
}
.rightCheckboxs {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.icon {
  width: 60px;
  font-size: 24px;
  text-align: center;
}
.title {
  font-size: 14px;
  margin-top: 14px;
  margin-left: 30px;
  text-align: left;
}
.titles {
  font-size: 14px;
}
.el-col-2 {
  max-width: 6.25% !important;
  flex: 0 0 20% !important;
}
</style>
